<template>
  <div class="flex-grow d-flex-col">
    <div class="m-b-10">
      <el-button type="primary" @click="addRow">添加一行</el-button>
      <el-button type="primary" @click="getEditData"
        >获取整个table数据</el-button
      >
    </div>
    <VueWilltable
      ref="willtable"
      :columns="columns"
      v-model="tableData"
      maxHeight="800"
    />
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import VueWilltable from "vue-willtable";
import "vue-willtable/dist/vue-willtable.min.css";
export default {
  components: {
    VueWilltable
  },
  props: {
    syncDatas: {
      type: Function,
      required: true
    },
    addDoc: {
      type: Function,
      required: true
    },
    updateDoc: {
      type: Function,
      required: true
    },
    deleteDoc: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      columns: [
        {
          type: "selection",
          width: 40,
          fixed: true
        },
        {
          title: "序号",
          key: "sid",
          fixed: true,
          type: "number",
          width: 100
        },
        {
          title: "姓名",
          key: "name",
          fixed: true,
          width: 120
        },
        {
          title: "日期",
          key: "date",
          type: "date",
          width: 100
        },
        {
          title: "工作岗位",
          key: "email",
          width: 300,
          type: "select",
          options: [
            {
              value: "Web前端开发",
              label: "Web前端开发"
            },
            {
              value: "Java开发",
              label: "Java开发"
            },
            {
              value: "Python开发",
              label: "Python开发"
            },
            {
              value: "Php开发",
              label: "Php开发"
            }
          ]
        },
        {
          title: "月份",
          key: "month",
          type: "month",
          width: 100
        },
        {
          title: "地址",
          key: "address",
          width: 200
        },
        {
          title: "标题",
          key: "title",
          width: 300
        },
        {
          title: "内容",
          key: "paragraph",
          width: 300
        },
        {
          title: "链接",
          key: "url",
          width: 200
        },
        {
          title: "ip",
          key: "ip",
          width: 200,
          validate: value => {
            const pattern = /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/g;
            return pattern.test(value);
          }
        },
        {
          title: "总金额",
          key: "sum",
          width: 200
        },
        {
          title: "ID",
          key: "id",
          width: 200
        },
        {
          title: "色值",
          key: "color",
          width: 200
        }
      ],
      tableData: [],
      formProps: {
        props: {
          text: {
            type: "text"
          },
          select: {
            type: "select",
            multiple: true,
            options: [
              {
                value: "选项1",
                label: "黄金糕"
              },
              {
                value: "选项2",
                label: "双皮奶"
              },
              {
                value: "选项3",
                label: "蚵仔煎"
              },
              {
                value: "选项4",
                label: "龙须面"
              },
              {
                value: "选项5",
                label: "北京烤鸭"
              }
            ]
          },
          number: {
            type: "number",
            precision: 4
          },
          date: {
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd"
          },
          time: {
            type: "time"
          },
          switch: {
            type: "switch"
          },
          radio: {
            type: "radio",
            options: [
              {
                value: "选项1",
                label: "黄金糕"
              },
              {
                value: "选项2",
                label: "双皮奶"
              }
            ]
          },
          cascader: {
            type: "cascader",
            props: {
              multiple: true,
              checkStrictly: true
            },
            options: [
              {
                value: "zhinan",
                label: "指南",
                children: [
                  {
                    value: "shejiyuanze",
                    label: "设计原则设计原则设计原则",
                    children: [
                      {
                        value: "yizhi",
                        label: "一致"
                      },
                      {
                        value: "fankui",
                        label: "反馈"
                      },
                      {
                        value: "xiaolv",
                        label: "效率"
                      },
                      {
                        value: "kekong",
                        label: "可控"
                      }
                    ]
                  },
                  {
                    value: "daohang",
                    label: "导航",
                    children: [
                      {
                        value: "cexiangdaohang",
                        label: "侧向导航"
                      },
                      {
                        value: "dingbudaohang",
                        label: "顶部导航"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        },
        methods: {}
      },
      isCellValueChange: false,
      isDBReady: false,
      currentRow: ""
    };
  },
  methods: {
    addRow() {
      this.$refs.editable.addRow();
    },
    getEditData() {
      return this.$refs.editable.getData();
    },
    getTableData() {
      return new Promise((resolve, reject) => {
        const datas = [];
        resolve(datas);
      });
    },
    handleCellClick(row) {
      this.currentRow = row;
    },
    handleCellChange(val) {
      this.isCellValueChange = true;
    },
    handleCellBlur({ isSelectOrCascader, value }) {
      console.log(1111);
      if (isSelectOrCascader && value) return;
      if (!this.isCellValueChange || !this.currentRow) return;
      if (this.$dayjs(this.currentRow._id).isValid()) {
        return;
      }
      this.updateDoc(this.currentRow);
    },
    handleDataChange(events) {
      //新增
      if (events.type == "save") {
        this.currentRow = "";
        return new Promise((resolve, reject) => {
          if (events.row.text) {
            events.row._id = uuidv4();
            this.addDoc(events.row);
          } else {
            reject("文本列必填！");
          }
        });
      }
      //编辑
      if (events.type == "edit") {
        return new Promise((resolve, reject) => {
          if (events.row.text) {
            this.updateDoc(events.row);
          } else {
            reject("文本列必填！");
          }
        });
      }
      // 删除
      if (events.type == "delete") {
        return new Promise((resolve, reject) => {
          this.deleteDoc(events.row);
        });
      }
    },
    updateData(oldData, newData) {
      const datas = this.getEditData();
      const index = datas.findIndex(item => item._id === oldData._id);
      datas.splice(index, 1, newData);
      this.tableData = datas;
    },
    addData(newData, isFirst) {
      const datas = this.getEditData();
      isFirst && this.$refs.editable.cancelEdit(datas.length - 1);
      datas.push(newData);
      this.tableData = datas;
      this.$refs.editable.doLayout();
    },
    deleteData(_id) {
      const datas = this.getEditData();
      const index = datas.findIndex(item => item._id === _id);
      datas.splice(index, 1);
      this.tableData = datas;
      this.$refs.editable.doLayout();
    }
  },
  mounted() {
    this.getTableData().then(datas => {
      this.syncDatas(datas).then(resDatas => {
        this.tableData = resDatas;
        this.$refs.willtable.setData(resDatas);
        this.isDBReady = true;
      });
    });
  },
  beforeDestroy() {
    this.isDBReady = false;
  }
};
</script>

<style></style>
